<template>
  <div class="carrousel" :class="{ mobile: isMobile }">
    <transition name="module" mode="out-in">
      <empty-box v-if="!articleList.length" key="empty" class="article-empty-box">
        <slot>{{ $i18n.text.article.empty }}</slot>
      </empty-box>
      <div
        v-else-if="renderSwiper"
        key="swiper"
        v-swiper:swiper="swiperOption"
        class="swiper index"
        @transitionStart="handleSwiperTransitionStart"
        @transitionEnd="handleSwiperTransitionEnd"
      >
        <div class="swiper-wrapper">
          <div
            v-for="(item, index) in articleList"
            :key="index"
            class="swiper-slide slide-item"
          >
            <div
              class="content filter"
              :class="{ 'motion-blur-horizontal': transitioning }"
            >
              <template v-if="item.ad">
                <a
                  :href="item.url"
                  target="_blank"
                  rel="external nofollow noopener"
                >
                  <img :src="item.src" :alt="item.title">
                  <span class="title">{{ item.title }}</span>
                </a>
              </template>
              <template v-else>
                <img :src="humanizeThumb(item.thumb)" :alt="item.title">
                <nuxt-link :to="`/article/${item.id}`" class="title">
                  <span>{{ item.title }}</span>
                </nuxt-link>
              </template>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" />
      </div>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'IndexCarrousel',
  props: {
    article: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      renderSwiper: true,
      transitioning: false,
      swiperOption: {
        autoplay: {
          delay: 3500,
          disableOnInteraction: false
        },
        pagination: {
          clickable: true,
          el: '.swiper-pagination'
        },
        setWrapperSize: true,
        mousewheel: true,
        observeParents: true,
        grabCursor: true,
        preloadImages: false,
        lazy: true
      }
    }
  },
  computed: {
    ...mapState('global', ['isMobile']),
    articleList() {
      return this.article.data.data ? this.article.data.data : []
    }
  },
  activated() {
    this.renderSwiper = true
    this.handleSwiperTransitionEnd()
  },
  deactivated() {
    this.renderSwiper = false
  },
  methods: {
    humanizeThumb(thumb) {
      if (thumb) {
        if (this.isMobile) {
          return `${thumb}?imageView2/1/w/768/h/271/format/${this.imageExt}/interlace/1/q/80|watermark/2/text/bHVveXVhbnhpYW5ndmlwLmNvbQ==/font/Y2FuZGFyYQ==/fontsize/560/fill/I0ZGRkZGRg==/dissolve/30/gravity/SouthWest/dx/30/dy/15|imageslim`
        } else {
          return `${thumb}?imageView2/1/w/1190/h/420/format/${this.imageExt}/interlace/1/q/80|watermark/2/text/bHVveXVhbnhpYW5ndmlwLmNvbQ==/font/Y2FuZGFyYQ==/fontsize/680/fill/I0ZGRkZGRg==/dissolve/30/gravity/SouthWest/dx/30/dy/15|imageslim`
        }
      } else {
        return `https://cdn.surmon.me/images/${this.isMobile ? 'mobile-' : ''}thumb-carrousel.jpg`
      }
    },
    handleSwiperTransitionStart() {
      this.transitioning = true
    },
    handleSwiperTransitionEnd() {
      this.transitioning = false
    }
  }
}
</script>

<style lang="scss">
  .index.swiper {

    .swiper-pagination {

      .swiper-pagination-bullet {

        &.swiper-pagination-bullet-active {
          width: 2rem;
          border-radius: 10px;
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  $pc-carrousel-height: 15em;
  $mobile-carrousel-height: calc((100vw - 2rem) * .35);

  .carrousel {
    height: $pc-carrousel-height;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    background-color: $module-bg;

    > .swiper {

      .slide-item {

        > .content {
          width: 100%;
          height: $pc-carrousel-height;
          position: relative;
          overflow: hidden;

          &.transitioning {
            filter: url('https://luoyuanxiangvip.com/images/motion-blur-filter.svg#blur');
          }

          img {
            width: 100%;
            @include css3-prefix(transform, scale(1));
            @include css3-prefix(transition, transform .88s);

            &:hover {
              @include css3-prefix(transform, scale(1.06));
            }
          }

          .title {
            position: absolute;
            margin: 0;
            top: 1.5rem;
            right: 2rem;
            color: $link-color;
            padding-right: .6em;
            padding-left: 1em;
            height: 2em;
            line-height: 2em;
            font-size: 1em;
            font-weight: bold;
            border-radius: 1px;
            letter-spacing: .3px;
            max-width: 75%;
            @include text-overflow;

            -webkit-background-clip: text;
            // background-color: $module-hover-bg-opacity-9;
            background: linear-gradient(90deg, transparent 0%, $module-bg 4em, $module-bg-opacity-9, $white);

            &:hover {
              color: $text-darken;
              // background: none;
              padding-left: .6em;
              background-color: $module-bg;
            }
          }
        }
      }
    }

    &.mobile {
      height: $mobile-carrousel-height;

      > .swiper {

        .slide-item {

          > .content {
            height: $mobile-carrousel-height;

            > .title {
              right: 1.7rem;
              max-width: 70%;
            }
          }
        }
      }
    }
  }
</style>
